<div
  class="devui-datepicker-pro-wrapper {{ cssClass }}"
  dDropDown
  appendToBody
  [disabled]="disabled"
  [isOpen]="isOpen"
  [trigger]="'manually'"
  (toggleEvent)="onToggle($event)"
  (click)="openDropdown($event)"
  [closeScope]="'blank'"
  [showAnimation]="showAnimation"
  [ngStyle]="{ width: width || '250px' }"
>
  <div dDropDownToggle>
    <ng-template [ngTemplateOutlet]="hostTemplate || default" [ngTemplateOutletContext]="{ value: dateValue }"></ng-template>
  </div>
  <ng-template #default>
    <div
      class="devui-single-picker devui-input-group devui-dropdown-origin"
      [ngClass]="{
        'devui-disabled': disabled,
        'devui-has-value': dateValue
      }"
    >
      <i class="devui-single-picker-icon">
        <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path
              d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z"
              fill="#BABBC0"
            ></path>
          </g>
        </svg>
      </i>
      <input
        #dateInput
        class="devui-input devui-form-control"
        [disabled]="disabled"
        [placeholder]="i18nText?.placeholder"
        [(ngModel)]="dateValue"
        autocomplete="off"
      />
      <div class="devui-input-group-addon close-icon-wrapper" (click)="clear($event)">
        <i class="icon icon-close"></i>
      </div>
    </div>
  </ng-template>

  <div class="devui-datepicker-pro-dropdown-panel" [ngStyle]="{ paddingBottom: !showTime && !footerTemplate ? 0 : '5px' }" dDropDownMenu>
    <d-datepicker-panel
      [isRangeType]="false"
      [showTime]="showTime"
      [customTemplate]="customTemplate"
      [footerTemplate]="footerTemplate"
      [mode]="mode"
    >
    </d-datepicker-panel>
  </div>
</div>
